<template>
	<div class="web-content">
		<div class="container" v-if = "get_data">
			<div class="container-box">
				<div class="content-box">
					<h2 class="news-info-title">{{info.title}}</h2>
					<div class="news-content">{{info.content}}</div>
					<div class="time-box">
						<i class="fa fa-clock-o"></i>
						{{info.create_time}}
					</div>
					
					<div class="hot-new-list">
						<ul class="list-group">
							<li class="list-group-item select-title">
								最新快讯
								<router-link to="/news">
									<span class="more-right">
										<i class="fa fa-bars"></i> 更多
									</span>
								</router-link>
							</li>
							<template v-for="(item,$index) in hot_data">
								<li class="list-group-item">
									<span class="badge hot-badge" v-if="$index<4">New</span>
									{{item.title}}
								</li>
							</template>
							
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<web-loading v-if ="!get_data"></web-loading>
	</div>
</template>
<script>
	import Loading from '../components/public/Loading.vue'
	export default{
		data(){
			return{
				info:{},
				get_data:false,
				hot_data:{}
			}
		},
		components:{
			'web-loading':Loading
		},
		mounted:function(){
			let me = this;
			let id = me.$route.query.id;
			$.get('//api.imrating.com/api/news/' + id + '/', function(res) {
				me.info = res.data.news[0];
				me.get_data = true;
				document.title = me.info.title;
			});
			let that = this;
			$.get('//api.imrating.com/api/news/?page=1&page_size=9', function(res) {
				that.hot_data = res.data.news;
			});
		}
	}
</script>
<style scoped="scoped">
	.more-right{
		float: right;
		color: #FFFFFF;
	}
	.list-group-item{
		text-align: left;
	}
	.hot-badge {
		background-color: red;
		color: #FFFFFF;
		float: right;
	}
	.select-title {
		background-color: #0f7dea;
		border-color: #0f7dea;
		z-index: 2;
		color: #fff;
		text-align: left;
	}
	.news-info-title{
		text-align: left;
	}
	.news-content{
		padding: 30px 0;
		font-size: 14px;
		color: #666666;
		text-indent: 2em;
		line-height: 30px;
		text-align: left;
	}
	.time-box{
		font-size: 12px;
		color: #999999;
		text-align: left;
	}
	.hot-new-list{
		margin: 50px 0;
	}
</style>